<script setup lang="ts">
import {ref} from 'vue';

// 定义父组件传递的 props
const props = defineProps({
  parentMessage: {
    type: String,
    required: true,
  },
});

// 定义 emit 事件
const emit = defineEmits(['child-message']);

// 子组件的状态
const childMessage = ref('Hello from Child');

// 向父组件传递消息
const sendMessageToParent = () => {
  emit('child-message', childMessage.value);
};

</script>

<template>
  <div>
    <h2>Child Component</h2>
    <p>Message from parent: {{ parentMessage }}</p>
    <p>Child message: {{ childMessage }}</p>
    <button @click="sendMessageToParent">Send to Parent</button>
  </div>
</template>

<style scoped>


</style>
